<template>
	<view>
		<my-status></my-status>
		<my-icon></my-icon>
		<view class="content">
			<view class="top-title">
				<view @click="now">
					<text class="top-title-left" :class="active == 0? 'add-active': ''">当前订单</text>
				</view>
				<view @click="history">
					<text class="top-title-right" :class="active == 1 ? 'add-active': ''"> 历史订单</text>
				</view>
			</view>
			<swiper style="margin-top: 20px;" :current="item" :indicator-dots="false" :autoplay="false" :interval="3000"
				:duration="1000">
				<!-- !!!!!!!!!!!当前页面！！！！！！！！！！ -->
				<swiper-item>
					<template v-if="ifOrder">
						<!-- 一个商品 -->
						<block>
							<view class="item" @click="toItem">
								<view class="item-left">
									<image src="../../static/tab-bar/cake.png" mode=""></image>
								</view>
								<view class="item-center">
									<view class="item-center-top">
										<text class="item-center-top1">黑天鹅新希望路店</text>
										<text class="item-center-top2">提</text>
									</view>
									<text class="item-center-center">2024/01/12 12：00</text>
									<view class="item-center-bottom">
										<text class="item-center-bottom1">1件</text>
										<text class="item-center-bottom2">￥59999.00</text>
									</view>
								</view>
								<view class="item-right">
									<text class="item-right1">待付款</text>
									<text class="item-right2">立即付款</text>
								</view>
							</view>
						</block>
						<view class="other">
							<text>没有更多数据了</text>
						</view>
					</template>
					<view v-if="!ifOrder" class="toOrder">
						<text class="toOrder-top">当前暂无订单信息</text>
						<text class="toOrder-bottom" @click="toGood">去下单</text>
					</view>
				</swiper-item>

				<!--!!!!!!!!! 历史订单页面!!!!!!!!!!!! -->
				<swiper-item>
					<view class="toOrder">
						<text class="toOrder-top">当前暂无订单信息</text>
						<text class="toOrder-bottom" @click="toGood">去下单</text>
					</view>
				</swiper-item>
			</swiper>

		</view>

	</view>

</template>

<script>
	export default {
		data() {

			return {
				item: 0,
				active: 0,
				ifOrder: "true"
			};

		},
		methods: {
			now() {
				this.item = 0
				this.active = 0
			},
			history() {
				this.active = 1
				this.item = 1
			},
			toItem() {
				uni.navigateTo({
					url: '/order/order-info/order-info'
				})
			},
			toGood() {
				uni.navigateTo({
					url: '/pages/good/good'
				})
			}


		}

	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 10%;
	}

	.top-title {
		margin-top: 10px;
		height: 30px;
		display: flex;
		justify-content: space-around;
		padding: 0 50rpx;
		box-sizing: border-box;
	}

	swiper {
		width: 100%;
		height: 500px;
		// background-color: gainsboro;
	}

	.top-title .top-title-left {
		display: block;
		padding: 4px 1px;
		width: 120px;
		height: 22px;
		font-size: 17px;
		font-weight: 100;
		text-align: center;
		border: 1px solid gainsboro;
		// touch{
		//  border: 1px solid black;
		// }
	}

	.top-title .top-title-right {
		display: block;
		padding: 4px 1px;
		border: 1px solid gainsboro;
		// background-color: gold;
		width: 120px;
		height: 22px;
		font-size: 17px;
		font-weight: 100;
		text-align: center;

		// background-color: hotpink;
	}

	.add-active {
		border: 1px solid black !important;
		// background-color: black;
		// color: white;
		// font-weight: bold;
	}

	// 没有订单时的页面   去下单--->跳转商品页面
	.toOrder {
		width: 100%;
		height: 60px;
		// border: 1px solid lightblue;
		margin-top: 150px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		text-align: center;
		align-items: center;

		.toOrder-top {
			font-size: 13px;
			font-weight: 100;
		}

		.toOrder-bottom {
			font-weight: 100;
			padding: 2px 5px;
			width: 80px;
			height: 20px;
			border: 1px solid black;
		}
	}

	.item {
		width: 100%;
		height: 120px;
		display: flex;
		flex-direction: row;
		// background-color: lightgoldenrodyellow;
		padding: 15px;
	}

	.item .item-left image {
		width: 120px;
		height: 120px;
	}

	.item .item-center {
		// border: 1px solid black;
		width: 150px;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
	}

	.item .item-center .item-center-top .item-center-top1 {
		width: 200px;
		font-size: 16px;
		font-weight: 100;

	}

	.item .item-center .item-center-top .item-center-top2 {
		background-color: black;
		margin-left: 5px;
		color: white;
		font-size: 15px;
	}

	.item .item-center .item-center-center {
		margin-top: 10px;
		font-size: 15px;
		font-weight: 100;

	}

	.item .item-center .item-center-bottom {
		margin-top: 45px;

		display: flex;
		// justify-content: space-between;
		font-size: 15px;
		font-weight: 100;
	}

	.item .item-center .item-center-bottom .item-center-bottom2 {
		// border: 1px solid red;
		margin-left: 20px;
	}

	.item .item-right {
		width: 70px;
		// padding: 10px;
		margin-right: 20px;
		display: flex;
		flex-direction: column;
		// border: 1px solid red;
	}

	.item .item-right .item-right1 {
		margin-left: 25px;
		font-size: 12px;
		font-weight: 100;
	}

	.item .item-right .item-right2 {
		// border: 1px solid red;
		margin-top: 82px;
		width: 70px;
		// margin-left: 0px;
		font-size: 15px;
		font-weight: 100;
	}

	swiper .other {
		width: 100%;
		text-align: center;
		font-size: 15px;
		font-weight: 150;
		color: gray;
	}
</style>